<template>
  <div class="tools-li">
    <slot name="reference" />
    <transition name="el-zoom-in-center">
      <div v-show="isShow" :key="tooltipId" ref="consult" transiton="el-zoom-in-center" class="custom-tools-ul">
        <div class="tools-ul-li" @click="openCustomerService">在线咨询</div>
      </div>
    </transition>
    <dialog-entity ref="openConsult" />
  </div>
</template>

<script>
import { generateId } from 'element-ui/src/utils/util'
import DialogEntity from '@/components/consult/dialog'
export default {
  name: 'ConsultTools',
  components: { DialogEntity },
  props: {
    trigger: {
      type: String,
      default: 'click',
      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    tooltipId() {
      return `el-popover-${generateId()}`
    }
  },
  mounted() {
    if (this.trigger === 'click') { // click 事件
      this.$nextTick(() => {
        this.$refs.consult.addEventListener('click', this.triggerOnClick)
      })
    }
    if (this.trigger === 'hover') {
      this.$nextTick(() => {
        this.$refs.consult.addEventListener('mouseenter', this.triggerOpen)
        this.$refs.consult.addEventListener('mouseleave', this.triggerClose)
      })
    }
  },
  destroyed() {
    if (this.trigger === 'click') { // click 事件
      this.$nextTick(() => {
        this.$refs.consult.removeEventListener('click', this.triggerOnClick)
      })
    }
    if (this.trigger === 'hover') {
      this.$nextTick(() => {
        this.$refs.consult.removeEventListener('mouseenter', this.triggerOpen)
        this.$refs.consult.removeEventListener('mouseleave', this.triggerClose)
      })
    }
  },
  methods: {
    openCustomerService() {
      this.$refs.openConsult.open()
      this.triggerClose()
    },
    triggerOnClick() {
      this.isShow = false
      this.$emit('callBack', this.isShow)
    },
    triggerOpen() {
      this.isShow = true
      this.$emit('callBack', this.isShow)
    },
    triggerClose() {
      this.isShow = false
      this.$emit('callBack', this.isShow)
    }
  }
}
</script>

<style scoped>
.tools-li {
  flex: 0 1 auto;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  padding: 4px;
  box-sizing: border-box;
}
.custom-tools-ul {
  position: absolute;
  width: 175px;
  height: 40px;
  left: -175px;
  top: 0px;
  background-color: #EBEEF5;
  border-radius: 4px 0px 0px 4px;
  overflow: hidden;
}
.tools-ul-li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  color: #00a0e9;
}
</style>
